<template>
<div>
    
    <!-- 一级菜单下面所拥有的二级菜单 -->
    <!-- <el-aside>
         <SideMenu :items='items'></SideMenu>
    </el-aside> -->
     <div class="sidebar">
    <!-- 左侧二级菜单栏的组件封装 -->
        <el-menu
            class="sidebar-el-menu"
            :default-active="toIndex()"
            background-color="white"
            text-color="#7a8297"
            active-text-color="#2d8cf0"
            @select="handleSelect"
            router>
            <template v-for="item in items">
                <el-menu-item :index="item" :key="item">
                    <!-- 需要图标的在 item 对象中加上属性 icon -->
                    <!-- <i :class="item.icon"></i> -->
                    <span slot="title">{{ item.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>

    <!-- 以及二级菜单所对应的页面 -->
    <el-main class="erji">
        <router-view></router-view>
    </el-main>

</div>
</template>

<script>
import SideMenu from '../../components/sidevue/side.vue';
export default {
    components:{
        SideMenu
    },
    data(){
        return {
            items: [
            {
                index: 'yibiaopan',
                title: '仪表盘'
            },
            {
                index: 'daiban',
                title: '待办事项'
            },
            {
                index: 'xiansuo',
                title: '线索'
            },
            {
                index: 'kehu',
                title: '客户'
            },
            {
                index: 'lianxiren',
                title: '联系人'
            },
            {
                index: 'shangji',
                title: '商机'
            },
            {
                index: 'hetong',
                title: '合同'
            },
            {
                index: 'huikuan',
                title: '回款'
            },
            {
                index: 'fapiao',
                title: '发票'
            },
            {
                index: 'huifang',
                title: '回访'
            }
            ,
            {
                index: 'chanping',
                title: '产品'
            }
        ],
        }
    },
    methods:{
        // 根据路径绑定到对应的二级菜单，防止页面刷新重新跳回第一个
        toIndex(){
            return this.$route.path.split('/')[2];
        },

        //切换菜单栏
        handleSelect(index) {
            this.$router.push('/' + index.index);
        },
        
    },
}
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu {
    width: 250px;
}
.sidebar > ul {
    height: 100%;
}
.erji{
    display: block;
    position: absolute;
    top: 60px;
    left: 240px;
}
</style>